<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用量进阶信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="/Windchill/netmarkets/jsp/ext/BOMECO/tianma/materialPages/APL/APLQuantity.js"></script>

    <link rel="stylesheet" href="../../js/bootstrap/css/font-awesome.css">
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.css">
    <script src="../../js/bootstrap/js/jquery.js"></script>
    <script src="../../js/bootstrap/js/popper.js"></script>
    <script src="../../js/bootstrap/js/bootstrap.js"></script>
    <script src="../../js/bootstrap/js/vue.js"></script>
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap-table.css">
    <script src="../../js/bootstrap/js/bootstrap-table.js"></script>
    <script src="../../js/bootstrap/js/bootstrap-table-zh-CN.js"></script>
</head>
<body>
<div class="container" id="vueApp">
    <div class="row mx-auto w-75" style="margin-top: 20px">
        <div class="col-12 text-center">
            <h3>进阶信息</h3>
        </div>
    </div>

    <!-- 表格 -->
    <div class="row mx-auto w-75">
        <table id="skillContentTable"></table>
    </div>

    <!-- 表格菜单 -->
    <div id="toolbar">
        <form class="form-inline">
            <button type="button" class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#myModal">新增</button>
            <button type="button" class="btn btn-outline-warning btn-sm" @click="delRows">删除</button>
            <button type="button" class="btn btn-outline-primary btn-sm" @click="saveRows">保存</button>
        </form>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="myModal" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h4 class="modal-title">新增用量进阶信息</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <form id="modalForm">
                    <div class="modal-body">

                       <div class="row form-group">
                            <div class="col-3"><label>ERP用量：</label></div>
                            <div class="col-9">
                                <input readonly="true" id="num" class="form-control" placeholder="ERP用量" >
                            </div>
                        </div>

                        <div class="row form-group">
                            <div class="col-3"><label><font color="red">*</font>使用范围：</label></div>
                            <div class="col-9">
                                <select onChange="clickRange(this)" id="range" name="role" class="form-control" title="请选择" data-width="150px" style="" >
                                    <option value="">--请选择范围--</option>
                                </select>
                            </div>
                        </div>
                        <div class="row form-group" hidden="true">
                            <div class="col-3"><label>使用范围key：</label></div>
                            <div class="col-9">
                                <input id="rangeValue" placeholder="使用范围" class="form-control" name="rangeValue">
                            </div>
                        </div>

                        <div class="row form-group">
                            <div class="col-3"><label><font color="red">*</font>目标等级：</label></div>
                            <div class="col-9">
                                <select onChange="clickLevel(this)" id="targetLevel" name="level" class="form-control" title="请选择" data-width="150px" style="" >
                                    <option value="">--请选择等级--</option>
                                </select>
                            </div>
                        </div>

                        <div class="row form-group" hidden="true">
                            <div class="col-3"><label>目标等级key：</label></div>
                            <div class="col-9">
                                <input placeholder="目标等级" class="form-control" id="targetLevelValue">
                            </div>
                        </div>

                        <div class="row form-group" hidden="true">
                            <div class="col-3"><label>当前等级：</label></div>
                            <div class="col-9">
                                <input readonly="true" class="form-control" placeholder="当前等级" id="historyLevelKey">
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-3"><label>当前等级：</label></div>
                            <div class="col-9">
                                <input readonly="true" class="form-control" placeholder="当前等级" id="historyLevelValue">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-primary" data-dismiss="modal" @click="addRow">确认</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>

    //判断是否显示操作按钮
    var pageType = getQueryString("pageType");
    if("edit" == pageType) {
        $('#toolbar').show();
    } else {
        $('#toolbar').hide();
    }

    //初始化表格
    $(document).ready(function () {
        var url = initUrl("/QuantityController/viewQuantity");
        $('#skillContentTable').bootstrapTable({
            url: url,
            resizable: true,
            striped: true,  //条纹
            pagination: false,
            sidePagination: 'client',
            //pageNumber: 1,
            //pageSize: 10,
            //pageList: [10,20,50,'All'],
            //search: true, //是否显示搜索框
            toolbar: '#toolbar',
            showRefresh: true,                  //是否显示刷新按钮
            showToggle: true,  //是否显示详细视图和列表视图的切换按钮
            showColumns: true, //是否显示所有的列（选择显示的列）
            queryParams: {
                wid: getQueryString("wid")
            },
            columns: [{
                checkbox: true,
                align: 'center'
            }, {
				field:'id',
				title:'序号',
				formatter: function (value, row, index) {
					return index + 1;
				}
			},{
                field: 'quantity',
                title: 'ERP用量',
                sortable: true,
                visible: true
            }, {
                field: 'range',
                title: '范围(英文名称)',
                sortable: false,
                visible: false
            }, {
                field: 'rangeValue',
                title: '范围',
                sortable: true,
                visible: true
            }, {
                field: 'targetLevel',
                title: '目标等级(英文名称)',
                sortable: false,
                visible: false
            }, {
                field: 'targetLevelValue',
                title: '目标等级',
                sortable: true,
                visible: true
            }, {
                field: 'historyLevel',
                title: '当前等级(英文名称)',
                sortable: false,
                visible: false
            }, {
                field: 'historyLevelValue',
                title: '当前等级',
                sortable: true,
                visible: true
            }, {
                field: 'type',
                title: '类型',
                sortable: true,
                visible: true
            }]
        });
    });

    //使用范围
    showSelect("/QuantityController/findQuantity", "range");

    //使用等级
    showEnumerateSelect("Level", "targetLevel");

    //动态获取wid
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    new Vue({
        el: "#vueApp",
        data: {
            checkAll: false,
            checkedRows: [],
            facilities: $('#skillContentTable').bootstrapTable('getData', true),
            newRow: {}
        },
        methods: {
            addRow: function () {
			
				 $('#myModal').on('hidden.bs.modal', function (){
                    document.getElementById("modalForm").reset();
                });	
					
                //  1、需要校验：新增的范围，在表格中不存在
                //  2、当选择范围后，当前等级自动带出
                //  3、获取对象,插入数据到第一行
                var tabData = $('#skillContentTable').bootstrapTable('getData', true);
                var index = tabData.length;
                var isResult = "";
                var targetLevelValue = $("#targetLevelValue").val();
                var quantity = $("#num").val();
                var range = $("#range").val();
                var targetLevel = $("#targetLevel").val();//目标等级
                var historyLevelKey = $("#historyLevelKey").val();//当前等级key
                if (null != tabData && tabData.length > 0) {
                    for (var i = 0; i < tabData.length; i++) {
                        if (range == tabData[i].range) {
                            isResult = "1";
                            break;
                        } else if ("" == range || "" == quantity || "" == targetLevelValue) {
                            isResult = "2";
							break;
                        } else if(targetLevel == historyLevelKey) {
                        	isResult = "3";
                        	break;
                        }
                    }
                }
                if ("1" == isResult) {
                    alert("当前范围已存在，不能重复添加");
                    return false;
                } else if ("2" == isResult) {
                    alert("请确认内容已填写完成");
                    return false;
                } else if("3" == isResult) {
					alert("目标等级与当前等级不能一致");
					return false;
                } 
                else {
                    var obj = $('#skillContentTable').bootstrapTable('insertRow', {
                        index: index,
                        row: {
                            quantity: null == quantity ? "" : quantity,
                            range: null == range ? "" : range,
                            rangeValue: null == $("#rangeValue").val() ? "" : $("#rangeValue").val(),
                            targetLevel: null == $("#targetLevel").val() ? "" : $("#targetLevel").val(),
                            targetLevelValue: null == targetLevelValue ? "" : targetLevelValue,
                            historyLevel: null == $("#historyLevelKey").val() ? "" : $("#historyLevelKey").val(),
                            historyLevelValue: null == $("#historyLevelValue").val() ? "" : $("#historyLevelValue").val(),
                            type: "新增"
                        }
                    });
                }
            },
            saveRows: function () {//保存表格数据
                var ur = initUrl("/QuantityController/saveData");
                //3、至少有一条数据
                var res = $('#skillContentTable').bootstrapTable('getData', true);
                if (res.length < 1) {
                    alert("用量数据为空，不能保存");
                    return false;
                }
                $.ajax({
                    type: "POST",
                    url: ur,
                    data: {
                        params: JSON.stringify(res),
                        wid: getQueryString("wid")
                    },
                    async: false,
                    success: function (databack) {
                        alert("进阶信息保存成功！");
                    },
                    error: function (request) {
                        alert("保存失败！");
                    }
                });
            },
            delRows: function () {
                getType();
            },
        }
    });

    function initUrl(url) {
        var urlHref1 = location.origin
        var urlHref2 = location.protocol + "//" + location.hostname;
        if (urlHref1 == "http://localhost:63342") {
            url = "https://www.easy-mock.com/mock/5bd18ddb18d3a27e0c5b9221/data" + url;
        } else {
            url = urlHref2 + "/Windchill/app" + url;
        }
        return url;
    }

    function getType() {
        var url = initUrl("/QuantityController/processType")
        $.ajax({
            type: "POST",
            url: url,
            //dataType: 'json',
            data: {
                params: getQueryString("wid")
            },
            success: function (res) {
                var selectValue = $("#skillContentTable").bootstrapTable('getSelections');
                if (null == selectValue || selectValue.length == 0) {
                    alert("请选择需要删除的数据");
                } else {
                    for (var i = 0; i < selectValue.length; i++) {
                        var rowType = selectValue[i].type;
                        <!-- 手动：随意删除 自动：只能删除新增的-->
                        if (null == rowType && "自动" == res) {
                            alert("ERP传送的数据不能删除");
                            return false;
                        } else {
                            $('#skillContentTable').bootstrapTable('remove', {
                                field: "range",
                                values: [selectValue[i].range]
                            });
                        }
                    }
                }
            }
        });
    }

    //范围中文名称
    function clickRange(range) {
        var rangeKey = range.selectedOptions[0].value;
        var url = initUrl("/QuantityController/findQuantity2");
        $.ajax({
            type: "POST",
            url: url,
            data: {
                range: rangeKey,
                wid: getQueryString("wid")
            },
            success: function (res) {
                var data = eval("(" + res + ")");
            	$("#num").val(data.num);
                $("#rangeValue").val(data.rangeValue);
                $("#historyLevelKey").val(data.levelKey);
                $("#historyLevelValue").val(data.levelValue);
            }
        });
    }

    //目标等级中文名称
    function clickLevel(level) {
        var levelKey = level.selectedOptions[0].value;
        var url = initUrl("/QuantityController/findLevel");
        $.ajax({
            type: "POST",
            url: url,
            data: {
                level: levelKey,
            },
            success: function (res) {
                $("#targetLevelValue").val(res);
            }
        });
    }
</script>
</html>